import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_250303/pages/hot_key/hot_key_vm.dart';
import 'package:flutter_250303/pages/web_view_page.dart';
import 'package:flutter_250303/route/route_utils.dart';
import 'package:flutter_250303/route/routes.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

class HotKeyPage extends StatefulWidget {
  const HotKeyPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HotKeyPageState();
  }
}

class _HotKeyPageState extends State<HotKeyPage> {
  HotKeyViewModel vm = HotKeyViewModel();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    vm.initData();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) {
          return vm;
        },
        child: Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Expanded(
                child: Column(
                  children: [
                    _getHotkey(),
                    _getHotkeyList(true),
                    _getTitlekey(),
                    _getHotkeyList(false)
                  ],
                ),
              ),
            ),
          ),
        ));
  }

  Widget _getHotkey() {
    return Container(
      decoration: BoxDecoration(
          border: Border(
              top: BorderSide(width: 1.r, color: Colors.red),
              bottom: BorderSide(width: 1.r, color: Colors.red))),
      padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 6.h, bottom: 6.h),
      child: Row(children: [
        Text(
          "搜索热词",
          style: TextStyle(fontSize: 14.sp, color: Colors.red),
        ),
        Expanded(child: SizedBox()),
        Image.asset(
          "assets/images/bee.png",
          width: 50.r,
          height: 50.r,
        )
      ]),
    );
  }

  Widget _getTitlekey() {
    return Container(
      decoration: BoxDecoration(
          border: Border(
              top: BorderSide(width: 1.r, color: Colors.red),
              bottom: BorderSide(width: 1.r, color: Colors.red))),
      padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 6.h, bottom: 6.h),
      child: Row(children: [
        Text(
          "热门网站",
          style: TextStyle(fontSize: 14.sp, color: Colors.red),
        ),
        Expanded(child: SizedBox()),
        Image.asset(
          "assets/images/bee.png",
          width: 50.r,
          height: 50.r,
        )
      ]),
    );
  }

  Widget _getHotkeyList(bool isHotkey) {
    List<String> nameArr = [];
    return Consumer<HotKeyViewModel>(builder: (context, vm, child) {
      return Container(
        margin: EdgeInsets.only(top: 20, bottom: 20),
        padding: EdgeInsets.symmetric(horizontal: 20.w),
        child: GridView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              mainAxisSpacing: 8.r, // 主轴间隔
              crossAxisSpacing: 8.r, // 横轴间隔
              maxCrossAxisExtent: 120.w, // 最大横轴范围
              childAspectRatio: 3 // 宽高比
              ),
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                // RouteUtils.push(context, WebViewPage(title: isHotkey ? "热词" : "网站"));
                var link = "";
                var hotkey = "";
                if (isHotkey) {
                  hotkey = vm.hotkeyList?[index].name ?? "";
                  link = "";
                } else {
                  hotkey = "";
                  link = vm.websiteList?[index].link ?? "";
                }
                RouteUtils.pushForNamed(context, RoutePath.webViewPage,
                    arguments: {"name": isHotkey ? "热词" : "网站", "hotkey":hotkey, "link":link});
              },
              child: Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey, width: 0.5),
                      borderRadius: BorderRadius.all(Radius.circular(10.r))),
                  child: isHotkey
                      ? Text(vm.hotkeyList?[index].name ?? "---")
                      : Text(vm.websiteList?[index].name ?? "---")),
            );
          },
          itemCount: vm.hotkeyList?.length ?? 0,
        ),
      );
    });
  }
}
